<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>反馈意见</title>
  <link rel="stylesheet" text="text.css" href="../../css/api.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/base.css">
  <link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
  <link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
  <style type="text/css">
         body{
         	background-color: #f3f5f7;
         }
  	    .bottom_0_position {
			position: absolute;
			bottom: 5px;
			right: 10px;
		}
		.pictures{
			width : 100%;
			background-color: white;
		}
		.CellFrame{
			float: left;
			position: relative;
			padding-left: 10px;
			padding-top: 10px;
			width: 33.33333333333%;
			/* background-color: white; */
		}
		.pic_dell{
			position: absolute;
		    right: -5px;
		    width: 20px;
		    top: 0px;
		}
		.picCell{
			/* background-color: white; */
			/* width: 100%; */
			/* padding: 10px; */
		}
		.add_pic_span {
			width: 100%;
			padding: 10px;

		}
		.bottom{
			width : 100%;
			clear: left;
			/* background-color: #f3f5f7; */
			/* padding-bottom: 80px; */
		}
		.contact{
			width: 100%;
			height: 40px;
			text-align: left;
			padding-left: 16px;
			line-height: 40px;
			vertical-align: middle;
			color: #333333;
			background-color: #f3f5f7;
		}
		.inputInfo{
			width: 100%;
			height: 40px;
		}
		.mui-input-group .mui-input-row {
				height: 40px;
			}

  </style>
</head>

<body>
      <form class="  mui-input-group"> <!-- 去掉了输入框圆角有弧度的问题 -->

	    <div class="base_style_color" id='BarAppearance' style="height: 22px;width: 100%; position:fixed; left: 0px;top:0px;"></div>
		<div class="base_navigation_bar base_style_color base_navigation_item_bar" style="position: fixed;left: 0px;top: 20px;">
				<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
				<span>反馈建议</span>
				<a id="submit" class="base_right_item">提交</a>
		</div>
	    <div class="mui-input-row" style="height: 180px;width: 100%;margin-top: 64px;">
			<textarea id="content" class="textarea_t padding10 base_title_font base_black_grey base_black_grey" maxlength="300" placeholder='请输入反馈内容...' onkeyup="chagetext()" style="height: 150px;width: 100%;"></textarea>
			<samp class="bottom_0_position base_content_font base_black_grey" >还可以输入<em id="text_num">300</em>/300字</samp>
		</div>

        <div class="pictures">
            <div id="mainPic">

            </div>
            
        	<div id="addPhoto" class="CellFrame">
        		<img class="picCell" src="../../icon/icon_picAdd.png" alt="" onclick="selectPhoto()">
        	</div>
        </div>
        <div class="bottom">
        	<div class="contact base_content_font">
        	联系方式
	        </div>
	        <div  id="contact" class="mui-input-row inputInfo base_content_font" >
				<input id="inputInfo" maxlength="30" class="mui-navigate-right base_content_font" type="text" placeholder="请填写QQ/手机/邮箱/,便于联系您" >
			</div>
        </div>
        <div>
        	
        </div>

	</form>

		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" typeid="0" style="color:#222222;">拍照</a>
				
				</li>
				<li class="mui-table-view-cell">
					<a href="#" typeid="1" style="color:#222222;">从相册选取</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture" typeid="2" style="color:#222222;"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<div id="offlineAlert" class="weui_dialog_confirm" style="display: none;">
			<div class="weui_mask"></div>
			<div class="weui_dialog">
				<div class="weui_dialog_hd">
					<strong class="weui_dialog_title">是否删除该图片？</strong>
				</div>
				<div class="weui_dialog_bd"></div>
				<div class="weui_dialog_ft">
					<a onclick="cleanCancel()" href="#" class="weui_btn_dialog default" style="color:#18b4ed">取消</a>
					<a onclick="cleanConfirm()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
				</div>
			</div>
		</div>
		<div id="tuichu" class="weui_dialog_confirm" hidden="hidden">
			<div class="weui_mask"></div>
			<div class="weui_dialog">
				<div class="weui_dialog_hd">
					<strong class="weui_dialog_title">确定退出当前页面？</strong>
				</div>
				<div class="weui_dialog_bd"></div>
				<div class="weui_dialog_ft">
						<a onclick="cleanCancelBack()" href="#" class="weui_btn_dialog default"  style="color:#18b4ed">取消</a>
					<a onclick="cleanConfirmSure()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
				</div>
			</div>
		</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/timeStampTool.js"></script>
<script type="text/javascript" src="../../script/processing_images.js"></script>

<script type="text/javascript">
    var count = 0;     //需要上传的图片
    var identify = 0;  //选完每个图片的cell的标识
    var imgIndex = 0;  //当前要删除的图片下标

    var imgStrArr = []; //需要上传的图片地址的数组
    var imgIdArr = []; //需要上传的图片id的数组
    var imgId = 0;
    var oldRow = 5;

    apiready = function(){
        miuilist();
        initFrame();
        initNotification();
        
        $('#submit').click(function(){
			submit();
        });
 
    }
    function initNotification () {
    	api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {

				showLoginOut();
				
			});
    }
    function cleanCancelBack() {
		$('#tuichu').hide();

	}

	//确定
	function cleanConfirmSure() {
		$('#tuichu').hide();
		api.closeWin();

	}
    function initFrame() {
    	$('.CellFrame').width((api.winWidth-40)/3);
        
        $('.picCell').width((api.winWidth-40)/3);
        $('.picCell').height((api.winWidth-40)/3);
    }
    function showLoginOut (argument) {
    	var content = $('#content').val();   //反馈文字内容
        var contact = $('#inputInfo').val();   //联系方式
        var imgArr = imgStrArr;        //图片的地址数组
        if (isNull(content) && isNull(content) && (imgStrArr.length == 0)) {
        	api.closeWin();
        }else{
        	$('#tuichu').show();
        }
    }
    function backClick () {
    	
    	showLoginOut();

    }
    function submit () {
    	

    	var content = $('#content').val();   //反馈文字内容
        var contact = $('#inputInfo').val();   //联系方式
        var imgArr = imgStrArr;        //图片的地址数组
        
        if (!isNull(content)) {
        	var url = url_addSuggestion;
        	// var url = 'http://base.cfnet.org.cn/active/variable/addSuggestion';
        	var submitType = api.pageParam.type;
        	if (submitType == undefined || submitType == null) {
        		submitType = 0;
        	}
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				content : content,
				imglist : imgArr,
				contact : contact,
				jid : $api.getStorage('cfnetppjxid'),
				type : submitType
			}
			showProgress();
			// alert(JSON.stringify(url));
			// alert(JSON.stringify(params));
			cfnetppPOST(url, params, true, function(data, status) {
                // alert(JSON.stringify(data));
				if (data.code == "200") {
	                 ShowToast(data.message);
				  	// alert(JSON.stringify(data.message));

	                 hideProgress();
	                 setTimeout('api.closeWin()',500);
	                
				  }else{
				  	// alert(JSON.stringify(data.message));
				  	hideProgress();
	                  ShowToast(data.message);
				  }
			});
        }else{
        	ShowToast("内容不能为空");
        }
        

    }
    function isNull( str ){
		if ( str == "" ) return true;
		var regu = "^[ ]+$";
		var re = new RegExp(regu);
		return re.test(str);
	}
    //监听剩余字数
	function chagetext(){
		var num = 300 - $('#content').val().length;
		$('#text_num').html(num);

  //       var figers = Math.ceil($('#content').width() / 14);  //一行文字个数
  //       var row = Math.ceil($('#content').val().length/figers);//实时的一共的行数
  //       var height = $('#content').height();
  //       var height2 = $('#superContent').height();
  //       // alert(row);
  //       if (row > 5) {
         
		// 	if (row > oldRow) {
		// 		oldRow ++;
		// 		$('#superContent').height(height2+25);
		// 		$('#content').height(height+25);
		// 	}
		
		// 	if(row < oldRow){
			
		// 		oldRow --;
		
		// 		$('#superContent').height(height2-25);
		// 		$('#content').height(height-25);
		// 	}
		// }
		
	}
	function cleanCancel () {
		$('#offlineAlert').hide();
	}
	function cleanConfirm () {
		$('#offlineAlert').hide();

        /***********下边copy的deletePic的方法内容,为了方便************/
        if (count >= 1) {
			count --;
			if (count == 9) {
				$('#addPhoto').hide();
			}else{
				$('#addPhoto').show();
			}
		}

		var strId = "cell"+identify; //清除界面
		$('#'+strId).remove();
        
        var dijige = 0;
		for (var i = 0; i < imgIdArr.length; i++) { 
			if (imgIdArr[i] == index) {
                dijige = i;
                imgIdArr.splice(i, 1);   //清除上传的数组
			}
		}

        // alert("前"+JSON.stringify(imgStrArr));
		imgStrArr.splice(dijige, 1);
		// alert("后"+JSON.stringify(imgStrArr));
	}
	function deletePic(index) {
		// $('#offlineAlert').show();

		identify = index;

		/****************/
		if (count >= 1) {
			count --;
			if (count == 9) {
				$('#addPhoto').hide();
			}else{
				$('#addPhoto').show();
			}
		}

		var strId = "cell"+identify; //清除界面
		$('#'+strId).remove();
        
        var dijige = 0;
		for (var i = 0; i < imgIdArr.length; i++) { 
			if (imgIdArr[i] == index) {
                dijige = i;
                imgIdArr.splice(i, 1);   //清除上传的数组
			}
		}

        // alert("前"+JSON.stringify(imgStrArr));
		imgStrArr.splice(dijige, 1);
		// alert("后"+JSON.stringify(imgStrArr));
		
	}
	//选择图片
	function selectPhoto () {
		mui('#picture').popover('toggle');
        
	}
	
	function miuilist() {
		mui('body ').on('tap', '.mui-popover-action li>a', function() {
			var typeid = $(this).attr('typeid');
			if (typeid == 0) {//拍照
				mui('#picture').popover('toggle');
				api.getPicture({
					sourceType : 'camera',
					encodingType : 'jpg',
					mediaValue : 'pic',
					destinationType : 'url',
					allowEdit : true,
					quality : 50,
					saveToPhotoAlbum : false
				}, function(ret, err) {
					if (ret) {
						var photoPath = ret.data;
						if (photoPath != '') {
							// alert(JSON.stringify(photoPath));
							
						    imgId ++;
						    imgIdArr.push(imgId);

							count ++;
							// var localTime = getNowDate();

							addpatrol(photoPath);

							var appStr = '<div id="cell'+imgId+'"  class="CellFrame">'+
	            	'<img class="picCell" src="'+photoPath+'" alt="">'+

	            	'<img class="pic_dell" src="../../icon/icon_shanchuhuise.png" alt="" onclick="deletePic('+imgId+')">'+
	            '</div>';
							$('#mainPic').append(appStr);
							initFrame();

							if (count == 9) {
								$('#addPhoto').hide();
							}else{
								$('#addPhoto').show();
							}
						}
					} else {
						
					}
				});
			} else if (typeid == 1) {//从相册选择
				mui('#picture').popover('toggle');
				api.getPicture({
					sourceType : 'album',
					encodingType : 'jpg',
					mediaValue : 'pic',
					destinationType : 'url',
					allowEdit : true,
					quality : 50,
					saveToPhotoAlbum : false
				}, function(ret, err) {
					if (ret) {
						var photoPath = ret.data;
						if (photoPath != '') {
							// alert(JSON.stringify(photoPath));
							
                            imgId ++;
                            imgIdArr.push(imgId);

							count ++;
							// var localTime = getNowDate();

							addpatrol(photoPath);

							var appStr = '<div id="cell'+imgId+'"  class="CellFrame">'+
	            	'<img class="picCell" src="'+photoPath+'" alt="">'+

	            	'<img class="pic_dell" src="../../icon/icon_shanchuhuise.png" alt="" onclick="deletePic('+imgId+')">'+
	            '</div>';
							$('#mainPic').append(appStr);
							initFrame();

							if (count == 9) {
								$('#addPhoto').hide();
							}else{
								$('#addPhoto').show();
							}
                            
						}
					} else {

					}
				});
			}
		});
	}
	//上传图片
	function addpatrol(compressImg) {
		showProgress();

		imgCompress(compressImg, 0.5, 0.5, function(imgStr) {       //压缩
			// alert(JSON.stringify(imgStr));
			UploadFile_ali(Upload_File_img, imgStr, function(ret) {    //上传
			
			hideProgress();
			imgStrArr.push(ret.fileurl);
			
			});
		});

	}

</script>
</html>